<script lang="ts" setup>
  import Requiredorder from '@/api/Ordermanagement'
  import { QueryParams } from '@/types/public'
  import { numberToCurrencyNo } from '@/utils'
  import { getorderStatus, getorderType } from './data'
  import { reactive } from 'vue'
  import { useRoute } from 'vue-router'
  import userService from '@/api/userService'

  const route = useRoute()
  const { id, time, servicetype, ordertype, status, shouldpay, desc } = route.query
 
  const TableData = [
    {
    
    }
  ]

  //调用接口数据 extends?
  interface QueryonDemand extends QueryParams {
    userId: string
    orderId?: string
    total?: number
  }
  const queryonDemand: QueryonDemand = reactive({ userId: localStorage.getItem('userId') as string, page: 1, pageSize: 10 })

  const getList = () => {
    Requiredorder.getonDemand(queryonDemand).then((res) => {
      tableData.length = 0
      tableData.push(...res.data.data.onDemandOrder)
      queryonDemand.total = res.data.data.totalCount
    })
  }
  getList()

  const handleSizeChange = (val: number) => {
    queryonDemand.page = 1
    queryonDemand.pageSize = val
    getList()
  }
  const handleCurrentChange = (val: number) => {
    queryonDemand.page = val
    getList()
  }
  let tableData: Array<QueryonDemand> = reactive([])

  const getOrdernumber = function (row: any, column: any, cellValue: any, index: any) {
    return cellValue
  }
  const moneyFormat = function (row: any, column: any, cellValue: any, index: any) {
    return '￥' + numberToCurrencyNo(cellValue)
  }
  const orderTypeFormat = function (cellValue: any) {
    let str = ''
    for (const key in getorderType) {
      if (Object.prototype.hasOwnProperty.call(getorderType, key)) {
        const element = getorderType[key]
        for (const k in element.child) {
          if (Object.prototype.hasOwnProperty.call(element.child, k)) {
            const val = element.child[k]
            if (cellValue === val.value) {
              str = val.text
            }
          }
        }
      }
    }

    return str
  }
  const findordertype = function (ordertype: any) {
    const type: any = getorderType[0].child.find((v: any) => v.id === ordertype)
    return type
  }

  const findstatus = function (cellValue: any) {
    const status: any = getorderStatus[0].child.find((v: any) => v.id === cellValue)
    return status
  }

  const payInformation = reactive({
    userId: localStorage.getItem('userId') as string
  })

  const goPay = async (id: any) => {
    userService.goPay(payInformation.userId, id)
  }
</script>

<template>
  <div class="content-box">
    <div class="select-title">订单号：{{ id }}</div>
    <div class="tips">
      <div class="left">!</div>
      <span style="margin-left: 20px">待支付</span><span style="margin-left: 20px">|</span><span style="margin-left: 20px">应付金额：￥2,000.00</span
      ><span style="margin-left: 20px">实际金额：</span><span style="font-size: 24px">2,000.00</span>
      <span style="color: #ff7500; margin-left: auto; margin-right: 30px">剩余支付时间：24:02:36</span>

      <div></div>
    </div>
    <div class="info">
      <span style="color: #556279">创建时间</span><span style="margin-left: 20px">2{{ time }}</span
      ><span style="margin-left: 64px; color: #556279">订单类型</span><span style="margin-left: 20px">新购</span>
    </div>
    <div class="resource">资源信息</div>
    <div class="table-content">
      <el-table :row-style="{ height: '34px' }" :data="TableData" style="margin-left: 30px">
        <el-table-column label="资源信息">
          <div>{{ desc }}</div>
        </el-table-column>
        <el-table-column label="其他信息">
          <div>{{ servicetype }}</div>
        </el-table-column>
        <el-table-column label="订单类型">
          <div>{{ findordertype(ordertype).text }}</div>
        </el-table-column>
        <el-table-column label="支付信息（元）">
          <div>{{ shouldpay }}</div>
        </el-table-column>
        <el-table-column label="减扣金额（元）">
          <div>￥0.00</div>
        </el-table-column>
        <el-table-column label="应付金额（元）">
          <div>{{shouldpay}}</div>
        </el-table-column>
        <el-table-column label="实际付款（元）">
          <div>{{shouldpay}}</div>
        </el-table-column>
        <el-table-column label="交易记录跟踪">
          <div>{{ time }} {{ findstatus(status).text }}</div>
        </el-table-column>
      </el-table>
    </div>
    <div class="total">
      <span style="margin-left: 1%">总计</span><span style="margin-left: 35.65%">{{shouldpay}}</span><span style="margin-left: 10.65%">￥0.00</span
      ><span style="margin-left: 10.65%">{{shouldpay}}</span>
    </div>
    <div class="pay-select">
      <button class="blog" @click="goPay(id)">去付款</button>
      <div style="margin-left: auto"><span>实际付款：</span><span style="color: #ff7500; font-size: 24px">{{shouldpay}}</span></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .content-box {
    background: $blank-color;
    height: auto;

    .select-title {
      height: 69px;
      padding: 0 30px;
      align-items: center;
      display: flex;
      font-size: 18px;
      font-weight: 700;
      color: $text-color;
    }
    .tips {
      height: 76px;
      display: flex;
      align-items: center;
      margin: 0 30px;
      background: rgba(255, 117, 0, 0.1);
      border-top: 2px solid #ff7500;
      font-size: 14px;
      // justify-content: space-between;
      .left {
        width: 44px;
        height: 44px;
        border: 3px solid #ff7500;
        color: #ff7500;
        font-size: 36px;
        text-align: center;
        line-height: 44px;
        border-radius: 50%;
        margin-left: 24px;
      }
    }
    .info {
      height: 69px;
      margin: 0 30px;
      align-items: center;
      display: flex;
      font-size: 14px;
      font-weight: 400;
      border-bottom: 1px solid #e7e9ef;
    }
    .resource {
      height: 69px;
      margin: 0 30px;
      align-items: center;
      display: flex;
      font-size: 18px;
      font-weight: 700;
    }
    .table-content {
      margin-bottom: 20px;
      width: 98%;
    }
    :deep(thead tr th) {
      background-color: #f6f7fa !important;
      height: 34px;
    }
    :deep(.el-table .el-table__cell) {
      padding: 0;
    }
    .total {
      height: 54px;
      margin: 0 30px;
      align-items: center;
      display: flex;
      font-size: 14px;
      font-weight: 700;
      background-color: #f6f7fa;
    }
    .pay-select {
      height: 69px;
      padding: 0 30px;
      align-items: center;
      display: flex;
      font-size: 18px;
      font-weight: 700;
      color: $text-color;

      .blog {
        width: 100px;
        height: 34px;
        cursor: pointer;
        background-color: #ff7500;
        color: white;
        border: 0px;
      }
    }
  }
</style>
